<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件服务</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <script type="text/javascript" th:src="@{/js/base64.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/qrcode.min.js}"></script>
    <style>
        .table-hover > tbody > tr:hover > td,
        .table-hover > tbody > tr:hover > th {
            color: #0236aa;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline" style="float: left" role="form" enctype="multipart/form-data" method="post"
              th:attr="action=@{/file/upload}">
            <div class="form-group">
                <input multiple type="file" name="file"/>
            </div>
            <button class="btn btn-primary" type="submit"><i class="fa fa-cloud-upload fa-lg"></i>上传</button>
        </form>
        <div style="float: right;" id="qrcode"></div>
        <div style="float: right;padding-top: inherit;padding-right: 12%" th:if="${application.cleanDaysBefore} > 0">
            为保障使用体验，系统会定时清理超<span th:text="${application.cleanDaysBefore}"
                                  style="color:red">7</span>天文件，请上传完后及时使用!
        </div>
    </div>
</div>
<div>
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th style="width:40%">文件名</th>
            <th style="width:20%">大小</th>
            <th style="width:20%">最后修改时间</th>
            <th style="width:20%">操作
                (<a class="btn-sm btn-danger" th:href="@{/file/delete_all}">删除所有</a>)
            </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="fileVO:${fileVOs}">
            <td th:text="${fileVO.fileName}"></td>
            <td th:text="${fileVO.fileSize}"></td>
            <td th:text="${#dates.format(fileVO.lastModified, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td>
                <a class="btn-sm btn-success" th:href="@{/file/download/{filename}(filename=${fileVO.fileName})}"><i
                        class="fa fa-download fa-lg"></i>下载</a>
<!--                <a class="btn-sm btn-info" href="" th:onclick="preview([[${fileVO.fileName}]])"><i-->
<!--                        class="fa fa-search-plus fa-lg"></i>预览</a>-->
                <a class="btn-sm btn-warning" th:href="@{/file/delete/{filename}(filename=${fileVO.fileName})}"><i
                        class="fa fa-trash-o fa-lg"></i>删除</a><br/>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script th:inline="javascript" type="text/javascript">
    /*<![CDATA[*/
    let previewServerUrl =/*[[${application.previewServerUrl}]]*/ '';
    let qrCodeUrl =/*[[${application.qrCodeUrl}]]*/ '';
    /*]]>*/
    let ctx = window.location.origin;
    let qrcode = new QRCode(document.getElementById("qrcode"), {
        text: qrCodeUrl,
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    function preview(filename) {
        let fullUrl = ctx + '/file/download/' + filename;
        window.open(previewServerUrl + '?url=' + encodeURIComponent(Base64.encode(fullUrl)))
    }
</script>
</html>